<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1：图片与文字环绕</title>
		<style>
			img{
				/* 图片脱离文档流--文字包含在图片周边 */
				float: left;
				margin-right: 50px;/*图片与文字连接处间隙*/
				margin-bottom: 50px;/*图片与文字连接处间隙*/
			}
			p{
				font-size: 16px;/* 页面默认字体尺寸 */
				line-height: 20px;/* 浮动文字，行高无法设定 */
				word-spacing: 20px;
			}
		</style>
	</head>
	<body>
		<h1>浮动之图片文字环绕</h1>
		<img src="img/3.png" alt="裤子" width="250px" height="250px" />
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit saepe illum libero fuga similique error quisquam voluptatum, ex neque omnis maxime hic vitae dolorum possimus sequi ullam, ipsum nam repudiandae.  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum doloribus autem soluta modi praesentium! Sed nihil tenetur sint. Odio, omnis. Quibusdam ullam optio incidunt! Quos magnam sint recusandae laborum rem.  Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem praesentium nobis quidem, quos maiores dolores optio quam magnam, vel officiis qui iusto soluta harum unde voluptates, sit dicta eaque accusamus.</p>
	</body>
</html>